<template>
    <div v-if="visible && data" class="mb-4 p-3 bg-blue-500/10 border border-blue-500/30 rounded-lg">
        <div class="flex items-start justify-between mb-2">
            <div class="flex items-center space-x-2">
                <div class="w-4 h-4 bg-blue-500/20 rounded-full flex items-center justify-center">
                    <svg class="w-2.5 h-2.5 text-blue-400" fill="currentColor" viewBox="0 0 20 20">
                        <path
                            d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                    </svg>
                </div>
                <span class="text-blue-400 text-xs font-medium">AI智能建议</span>
            </div>
            <button @click="handleDismiss" class="text-gray-400 hover:text-gray-300 transition-colors">
                <el-icon class="text-xs">
                    <Close />
                </el-icon>
            </button>
        </div>

        <!-- AI优化的提示词 - 折叠显示 -->
        <div v-if="data.success && data.prompt">
            <div class="bg-gray-800/50 rounded p-2 mb-2">
                <div class="text-blue-300 text-xs mb-1">优化建议:</div>
                <div class="text-gray-200 text-xs leading-relaxed line-clamp-2">
                    {{ data.prompt }}
                </div>
            </div>
            <div class="flex space-x-2">
                <button @click="handleAccept"
                    class="px-2 py-1 bg-blue-500 hover:bg-blue-600 text-white text-xs rounded transition-colors">
                    应用
                </button>
                <button @click="handleDismiss"
                    class="px-2 py-1 bg-gray-600 hover:bg-gray-500 text-gray-200 text-xs rounded transition-colors">
                    忽略
                </button>
            </div>
        </div>

        <!-- AI建议 - 简化显示 -->
        <div v-else-if="data.suggestion">
            <div class="text-gray-300 text-xs leading-relaxed mb-2 line-clamp-3">
                {{ data.suggestion }}
            </div>
            <button @click="handleDismiss"
                class="px-2 py-1 bg-gray-600 hover:bg-gray-500 text-gray-200 text-xs rounded transition-colors">
                知道了
            </button>
        </div>
    </div>
</template>

<script setup>
import { Close } from '@element-plus/icons-vue'

// Props
const props = defineProps({
    visible: {
        type: Boolean,
        default: false
    },
    data: {
        type: Object,
        default: null
    }
})

// Emits
const emit = defineEmits(['accept', 'dismiss'])

// 处理接受优化
const handleAccept = () => {
    emit('accept', props.data)
}

// 处理忽略建议
const handleDismiss = () => {
    emit('dismiss')
}
</script>

<style scoped>
/* 文本截断样式 */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
</style>